<!--
首页
主要用到的方法
1.todetails(i.id,i.userId) 跳转到详情页的方法 配合@click使用
data主要参数
1.goodList 该数组存放的是闲置帖子列表的信息 可用 v-for 获取参数
-->
<template>
  <div style="background-color: #f5f7f9; ">
    <el-carousel indicator-position="outside" height="500px">
      <el-carousel-item v-for="item in lunbo" :key="item.id">
        <img width="100%" height="500px" :src="item.img" alt="">
      </el-carousel-item>
    </el-carousel>

    <div class="xianZhiTitle">
      <h1 style="font-size: 30px;font-weight: 900;">闲置帖子</h1>
      <div class="goods">
        <ul class="goodList">
          <li class="wow animate__animated animate__bounceInRight good" v-for='i in goodList' id='i.id' style=""
            @click="todetails(i.id, i.userId)">
            <img :src='i.productImageditys' alt=''>
            <div class="goodTitle">
              <!-- <p class="content">{{i.productDescriptionditys}}</p> -->
              <div class="goodTitleContent">
                <p style="line-height:20px">{{ i.productTitleditys }}</p>
                <span class="school" v-if="i.address === 1">官塘校区</span>
                <span class="school" v-else>社湾校区</span>
              </div>
              <span style="color: red;">￥<span>{{ i.price }}</span></span>
            </div>

          </li>
        </ul>
        <!-- <el-backtop target=".goods">返回顶部</el-backtop> -->
      </div>
      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :page-count="pagemax" :current-page.sync="page"
      @current-change="getGoodListPage(page)"
      @prev-click="getGoodListPage(page--)"
      @next-click="getGoodListPage(paget++)"
      >
      </el-pagination>

    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0%;
}

.xianZhiTitle {
  margin-top: 80px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.goods {

  background-color: #f5f7f9;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  /* line-height: 300px; */
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

body {
  background-color: #f5f7f9;

}

.school {
  color: #ababad;
  font-size: 10px;
}

.good {
  width: calc(25% - 50px);
  /* height: 30px; */
  border-radius: 15px;
  background-color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.good:hover {
  box-shadow: 15px;
  /* border: black 1px solid;
   */
  box-shadow: 2px 2px 5px #dadcde;
}

.good img {
  display: inline;
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  min-height: 240px;
  max-height: 24vh;
}

.good:hover p {
  color: blue;
}

.goodTitle {
  display: flex;
  width: 90%;
  height: 65px;
  justify-content: space-between;
  align-items: center;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 25px;
  /* padding: 10px; */
}

.goodTitleContent {
  display: flex;
  flex-direction: column;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

ul.goodList {
  flex-direction: row;
  flex-wrap: wrap;
  /* height: 800px; */
  display: flex;
  /* overflow: scroll; */
  /* width: 1000px; */
  max-width: 1400px;
  min-width: 1000px;
  scroll-behavior: unset;
  /* justify-content: center; */
  list-style: none;
  margin: auto;
  margin-bottom: 200px;
}

li {
  margin: 20px;
  /* width:100px;
  height:100px; */
  display: block;
}

.content {
  overflow: hidden;
  width: 100px;
  height: 50px;
}
</style>

<script>
import { getGoods, getGoodsPage } from '@/api/home'

export default {
  data() {
    return {
      goodList: [],
      pagemax:0,
      page:1,
      pagesize:24,
      lunbo: [{ id: 1, img: require('../assets/carousel/a.jpg') }, { id: 2, img: require('../assets/carousel/b.jpg') }, { id: 3, img: require('../assets/carousel/c.jpg') }, { id: 4, img: require('../assets/carousel/d.png') }],
    }
  },

  created() {
    this.getGoodListPageCountMax()
    this.getGoodListPage();
  },

  mounted() {
    this.$nextTick(() => {
      this.$wow.init()
    })
  },
  // watch: {
  // //   mounted() {
  // //     this.$nextTick(() => { // 在dom渲染完后,再执行动画
  // //       this.$wow.init()
  // //     })
  // //   }
  // // },
  methods: {
    // 获取最大页码
    getGoodListPageCountMax() {
      getGoodsPage({ pagesize: 10000 }).then(res => {
        // this.goodList = res;
        this.pagemax = parseInt(res.length / this.pagesize)+1
        // console.log(parseInt(this.pagemax) + 1);
      })
    },
    getGoodListPage() {//实现分页
      getGoodsPage({ page: this.page, pagesize: this.pagesize }).then(res => {
        this.goodList = res;
        console.log(this.goodList)
        console.log(this.page);
        this.$nextTick(() => { // 在dom渲染完后,再执行动画
          this.$wow.init()
        })
      })
    },
    // 跳转详情页事件
    todetails(goodid, publisherUserId) {
      this.$router.push("/Details?goodId=" + goodid + "&publisherUserId=" + publisherUserId);
    },

  }
}
</script>

